<template>
  <div class="logo-wrapper">
    <img v-if="showLogo" class="logo-img" :src="('../../../static/img/logo.png')" />
    <transition v-if="showTitle" name="el-fade-in-linear">
      <span v-show="!state.isCollapse || alwaysShow" class="logo-title">崇明教育</span>
    </transition>
  </div>
</template>

<script>
import store from '../store/index'
export default {
  name: 'Logo',
  props: {
    showTitle: {
      type: Boolean,
      default: true
    },
    showLogo: {
      type: Boolean,
      default: true
    },
    alwaysShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      state: store.state
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";

.logo-wrapper {
  height: $logoHeight;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  .logo-img {
    width: 65px;
    height: 60px;
  }

  .logo-title {
    margin-left: 5px;
    font-weight: bold;
  }
}
</style>
